<template>
	<view class="vip-level" v-if="isEmpty" :style="{'color':item.zi_color,'background':item.bg_color}">
		<image :src="item.image" mode="heightFix" class="img" style="height: 40rpx;"></image>
		{{item.name}}
	</view>
</template>

<script>
	export default {
		name: "vip-level",
		data() {
			return {

			};
		},
		props: ['item'],
		computed: {
			isEmpty() {
				if (this.item)
					return !!this.item.toString()
				else
					return !!this.item
			}
		}
	}
</script>

<style lang="less">
	.vip-level {
		position: relative;
		padding: 0 20rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		border-radius: 0 36rpx 36rpx 0;
		margin-left: 40rpx;

		.img {
			position: absolute;
			left: 0%;
			top: 50%;
			transform: translate(-100%, -50%);
		}
	}
</style>